<template>
  <view class="hb-input">
    <label class="label">{{label}}</label>
    <input class="input" :value="currentValue" :type="type" :placeholder="placeholder" @input="input"/>
  </view>
</template>

<script>
export default {
  name: "hb-input",
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    placeholder: String,
    type: String,
    label: String,
    value: {
      type: [String, Number],
      default: '',
    },
  },
  data(){
    return {
      currentValue: this.value
    }
  },
  watch: {
    value (val) {
      this.currentValue = val;
    }
  },
  methods: {
    input(e) {
      this.$emit('input', e.detail.value)
    }
  }
}
</script>

<style scoped lang="scss">
.hb-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  border: 1PX solid $hb-input-border;
  border-radius: 8rpx;
  color: #515a6e;
  background-color: #fff;
  background-image: none;
  .label {
    padding-right: 10rpx;
    line-height: 50rpx;
    min-width: 120rpx;
    font-size: 28rpx;
    color: $hb-text-color;
    height: 50rpx;
  }
  .input {
    flex: 1;
    height:50rpx;
    line-height: 50rpx;
    font-size: 28rpx;
    color: $hb-title-color;
  }
}
</style>
